<script setup>
	// 表单校验（账号名+密码）

	import { ref } from 'vue'

	import { ElMessage } from 'element-plus'
	import 'element-plus/theme-chalk/el-message.css'
	import { useRouter } from 'vue-router'

	import { useUserStore } from '@/stores/userStore'

	const userStore = useUserStore()

	// 1. 准备表单对象
	const form = ref({
		account: '18610848230',
		password: '123456',
		agree: true,
	})

	// 2. 准备规则对象
	const rules = {
		account: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
		password: [
			{ required: true, message: '密码不能为空', trigger: 'blur' },
			{ min: 6, max: 14, message: '密码长度为6-14个字符', trigger: 'blur' },
		],
		agree: [
			{
				validator: (rule, value, callback) => {
					console.log(value)
					// 自定义校验逻辑
					// 勾选就通过 不勾选就不通过
					if (value) {
						callback()
					} else {
						callback(new Error('请勾选协议'))
					}
				},
			},
		],
	}

	// 3. 获取form实例做统一校验
	const formRef = ref(null)
	const router = useRouter()
	const doLogin = () => {
		const { account, password } = form.value
		// 调用实例方法
		formRef.value.validate(async (valid) => {
			// valid: 所有表单都通过校验  才为true
			console.log(valid)
			// 以valid做为判断条件 如果通过校验才执行登录逻辑
			if (valid) {
				// TODO LOGIN
				await userStore.getUserInfo({ account, password })
				// 1. 提示用户
				ElMessage({ type: 'success', message: '登录成功' })
				// 2. 跳转首页
				router.replace({ path: '/' })
			}
		})
	}

	// 1. 用户名和密码 只需要通过简单的配置（看文档的方式 - 复杂功能通过多个不同组件拆解）
	// 2. 同意协议  自定义规则  validator:(rule,value,callback)=>{}
	// 3. 统一校验  通过调用form实例的方法 validate -> true
</script>

<template>
	<div>
		<header class="login-header">
			<div class="container m-top-20">
				<h1 class="logo">
					<RouterLink to="/">小兔鲜</RouterLink>
				</h1>
				<RouterLink class="entry" to="/">
					进入网站首页
					<i class="iconfont icon-angle-right"></i>
					<i class="iconfont icon-angle-right"></i>
				</RouterLink>
			</div>
		</header>
		<section class="login-section">
			<div class="wrapper">
				<nav>
					<a href="javascript:;">账户登录</a>
				</nav>
				<div class="account-box">
					<div class="form">
						<el-form
							ref="formRef"
							:model="form"
							:rules="rules"
							label-position="right"
							label-width="60px"
							status-icon
						>
							<el-form-item prop="account" label="账户">
								<el-input v-model="form.account" />
							</el-form-item>
							<el-form-item prop="password" label="密码">
								<el-input v-model="form.password" />
							</el-form-item>
							<el-form-item prop="agree" label-width="22px">
								<el-checkbox size="large" v-model="form.agree">
									我已同意隐私条款和服务条款
								</el-checkbox>
							</el-form-item>
							<el-button size="large" class="subBtn" @click="doLogin">
								点击登录
							</el-button>
						</el-form>
					</div>
				</div>
			</div>
		</section>

		<footer class="login-footer">
			<div class="container">
				<p>
					<a href="javascript:;">关于我们</a>
					<a href="javascript:;">帮助中心</a>
					<a href="javascript:;">售后服务</a>
					<a href="javascript:;">配送与验收</a>
					<a href="javascript:;">商务合作</a>
					<a href="javascript:;">搜索推荐</a>
					<a href="javascript:;">友情链接</a>
				</p>
				<p>CopyRight &copy; 小兔鲜儿</p>
			</div>
		</footer>
	</div>
</template>

<style scoped lang="scss">
	.login-header {
		background: #fff;
		border-bottom: 1px solid #e4e4e4;

		.container {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
		}

		.logo {
			width: 200px;

			a {
				display: block;
				height: 132px;
				width: 100%;
				text-indent: -9999px;
				// background: url('@/assets/images/logo.png') no-repeat center 18px /
				// 	contain;
				background: url('@/assets/logo.svg') center -40px / cover;
				background-size: 150% 150%;
			}
		}

		.sub {
			flex: 1;
			font-size: 24px;
			font-weight: normal;
			margin-bottom: 38px;
			margin-left: 20px;
			color: #666;
		}

		.entry {
			width: 120px;
			margin-bottom: 38px;
			font-size: 16px;

			i {
				font-size: 14px;
				color: $xtxColor;
				letter-spacing: -5px;
			}
		}
	}

	.login-section {
		background: url('@/assets/images/login-bg.png') no-repeat center / cover;
		height: 488px;
		position: relative;

		.wrapper {
			width: 380px;
			background: #fff;
			position: absolute;
			left: 50%;
			top: 54px;
			transform: translate3d(100px, 0, 0);
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);

			nav {
				font-size: 14px;
				height: 55px;
				margin-bottom: 20px;
				border-bottom: 1px solid #f5f5f5;
				display: flex;
				padding: 0 40px;
				text-align: right;
				align-items: center;

				a {
					flex: 1;
					line-height: 1;
					display: inline-block;
					font-size: 18px;
					position: relative;
					text-align: center;
				}
			}
		}
	}

	.login-footer {
		padding: 30px 0 50px;
		background: #fff;

		p {
			text-align: center;
			color: #999;
			padding-top: 20px;

			a {
				line-height: 1;
				padding: 0 10px;
				color: #999;
				display: inline-block;

				~ a {
					border-left: 1px solid #ccc;
				}
			}
		}
	}

	.account-box {
		.toggle {
			padding: 15px 40px;
			text-align: right;

			a {
				color: $xtxColor;

				i {
					font-size: 14px;
				}
			}
		}

		.form {
			padding: 0 20px 20px 20px;

			&-item {
				margin-bottom: 28px;

				.input {
					position: relative;
					height: 36px;

					> i {
						width: 34px;
						height: 34px;
						background: #cfcdcd;
						color: #fff;
						position: absolute;
						left: 1px;
						top: 1px;
						text-align: center;
						line-height: 34px;
						font-size: 18px;
					}

					input {
						padding-left: 44px;
						border: 1px solid #cfcdcd;
						height: 36px;
						line-height: 36px;
						width: 100%;

						&.error {
							border-color: $priceColor;
						}

						&.active,
						&:focus {
							border-color: $xtxColor;
						}
					}

					.code {
						position: absolute;
						right: 1px;
						top: 1px;
						text-align: center;
						line-height: 34px;
						font-size: 14px;
						background: #f5f5f5;
						color: #666;
						width: 90px;
						height: 34px;
						cursor: pointer;
					}
				}

				> .error {
					position: absolute;
					font-size: 12px;
					line-height: 28px;
					color: $priceColor;

					i {
						font-size: 14px;
						margin-right: 2px;
					}
				}
			}

			.agree {
				a {
					color: #069;
				}
			}

			.btn {
				display: block;
				width: 100%;
				height: 40px;
				color: #fff;
				text-align: center;
				line-height: 40px;
				background: $xtxColor;

				&.disabled {
					background: #cfcdcd;
				}
			}
		}

		.action {
			padding: 20px 40px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.url {
				a {
					color: #999;
					margin-left: 10px;
				}
			}
		}
	}

	.subBtn {
		background: $xtxColor;
		width: 100%;
		color: #fff;
	}
</style>
